import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Index extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
    )
  }
}
var a = <h1>This is header !</h1>;
class Header extends Component {

  render() {
    return a;
  }
}



class Content extends Component {
  render() {
    return (
      <h1>This is Content !</h1>
    )
  }
}


class Footer extends Component {
  render() {
    return (
      <h1>This is footer !</h1>
    )
  }
}



class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}



ReactDOM.render(
  <Index />,
  document.getElementById('root')
)